<route lang="json5">
{
  style: {
    navigationBarTitleText: '员工管理',
  },
}
</route>

<template>
    <z-paging ref="paging" v-model="list" @query="queryList" safe-area-inset-bottom>
        <view class="paging_cont">
            <view class="add" @click="goTo('/pages/store/worker/edit')">+ 添加员工</view>
            <wd-swipe-action v-for="obj, index in list" :key="index">
                <item rightIcon="arrow-right" @click="goTo('/pages/store/worker/edit?id=' + obj.id)">
                    <template #left>
                        <view style="display: flex;align-items: center;">
                            <image class="avatar" :src="obj.avatar && obj.avatar.url ? obj.avatar.url : avatar"
                                mode="aspectFill" />
                            {{ obj.name }}
                        </view>
                    </template>
                    <text class="content" @click.stop="sort(obj)">排序：{{ obj.sort }}</text>
                    <text class="content" @click.stop="state(obj)">已{{ obj.state
                    }}</text>
                </item>
                <template #right>
                    <view class="button" style="background:#F49C11;" @click="sort(obj)">排序</view>
                    <view class="button" style="background:#4C93FD;" @click="state(obj)">{{ obj.state == '开启' ? '关闭' :
                        '开启' }}</view>
                    <view class="button" style="background:#FF5A6A;" @click="del(obj)">删除</view>
                </template>
            </wd-swipe-action>
        </view>
    </z-paging>
</template>

<script lang="ts" setup>
import { http } from '@/utils/http';
import { goTo } from '@/utils/url';
import avatar from '/static/images/avatar.png';
import { useMessage } from 'wot-design-uni';
const message = useMessage()
const list = ref<any>([])
const paging = ref(null)
function queryList(page: number, page_size: number) {
    http.get('/member/store/store_worker/list', { page: page, page_size: page_size }).then((res: any) => {
        if (res.code === 200) {
            paging.value.complete(res.data.data);
        }
    })
}
onShow(() => {
    if (paging.value) paging.value.reload();
})

// 排序
function sort(obj: any) {
    message.prompt({ title: '排序', inputValue: obj.sort, inputType: 'number', inputPlaceholder: '按数字从小到大排序' }).then((resp) => {
        http.put('/member/store/store_worker', { id: obj.id, field: 'sort', value: resp.value }).then((res: any) => {
            uni.showToast({ title: res.message, icon: "none" })
            if (res.code === 200) {
                paging.value.reload();
            }
        })
    }).catch(() => { })
}

// 状态
function state(obj: any) {
    let state = obj.state == '开启' ? '关闭' : '开启';
    message.confirm({ title: '确定' + state + '吗' }).then(() => {
        http.put('/member/store/store_worker', { id: obj.id, field: 'state', value: state }).then((res: any) => {
            uni.showToast({ title: res.message, icon: "none" })
            if (res.code === 200) {
                paging.value.reload();
            }
        })
    }).catch(() => { })
}

// 删除
function del(obj: any) {
    message.confirm({ title: '确定删除吗' }).then(() => {
        http.delete('/member/store/store_worker', { id: obj.id }).then((res: any) => {
            uni.showToast({ title: res.message, icon: "none" })
            if (res.code === 200) {
                paging.value.reload();
            }
        })
    }).catch(() => { })
}
</script>

<style scoped>
.add {
    width: 80%;
    padding: 20rpx 0;
    margin: 10rpx auto 30rpx;
    color: white;
    text-align: center;
    background: linear-gradient(to right, #61c2ff, #34a8ff);
    border-radius: 80rpx;
}

.avatar {
    width: 100rpx;
    height: 100rpx;
    margin-right: 10rpx;
    border-radius: 10rpx;
}

.content {
    margin: 0 20rpx;
    font-size: 28rpx;
    color: #666;
}
</style>